var Pillar = (function($){
	function pillar(options){
		this.options = options;
	}
	
	pillar.prototype = {
		
		options: {
			id: '',
			title: '',
			max: 0,
			min: 0,
			type: 'vertical' // ellipse/vertical/horizontal
		},
		
		value : -1,
		
		start: function(){
			if (this.options.type === 'vertical') {
				createVertical(this.options);
			}
			else if(this.options.type === 'horizontal'){
				createHorizontal(this.options);
			}
			else if(this.options.type === 'ellipse'){
				createEllipse(this.options);
			}
			return this;
		},
		setValue : function(v){
			
			if (!this.value) {
				this.value = v;
			}
			
			var vi = this.options.max >= v && this.options.min <= v;
			
			var percent = (v - this.options.min) / (this.options.max - this.options.min) ;
			var r = percent * 255 ,g = 255 - r;
			
			if (vi && this.options.type === 'vertical') {
				$('#percent_' +this.options.id).stop().animate({
					height: percent * 100 + '%',
					backgroundColor : 'rgba('+parseInt(r)+','+parseInt(g)+',0,0.7)'
				},1500);
				$('#label_' +this.options.id).stop().animate({
					color : 'rgba('+parseInt(r)+','+parseInt(g)+',0,0.7)'
				},1500);
				$('#label_' + this.options.id).text(v +' / ' + parseInt(percent * 100) + '%');
			} 
			else if (vi && this.options.type === 'horizontal') {
				$('#percent_' +this.options.id).stop().animate({
					width: percent * 100 + '%',
					backgroundColor : 'rgba('+parseInt(r)+','+parseInt(g)+',0,0.7)'
				},1500);
				$('#label_' +this.options.id).stop().animate({
					color : 'rgba('+parseInt(r)+','+parseInt(g)+',0,0.7)'
				},1500);
				$('#label_' + this.options.id).text(v +' / ' + parseInt(percent * 100) + '%');
			} 
			else if(vi && this.options.type === 'ellipse'){
				$('#percent_' +this.options.id).stop().animate({
					backgroundColor : 'rgba('+parseInt(r)+','+parseInt(g)+',0,0.7)'
				},1500);
				$('#value_' + this.options.id).text(v);
			}
			else{
				console.log('Invalid value ' + v +' , must between ' + this.options.min + ' and ' + this.options.max);
				return;
			}
			
			this.value = v;
		}
	};
	
	/**
	 * vertical
	 * @param {Object} options
	 */
	var createVertical = function(options){
		var txt = ''
			+'<div class="pillar-box">'
			+'<table>'
			+'<tr>'
			+'<th colspan="3" id="title_'+options.id+'">'+options.title+'</th>'
			+'</tr>'
			+'<tr>'
			+'<th colspan="3" style="font-size:12px" id="label_'+options.id+'">0%</th>'
			+'</tr>'
			+'<tr>'
			+'<td style="width: 40%;"></td>'
			+'<td style="width: 20%;">'
			+'<div class="pillar">'
			+'<div class="pillar-percent" id="percent_'+options.id+'"></div>'
			+'</div>'
			+'</td>'
			+'<td style="width: 40%;text-align: left;padding:10% 5px;color:rgba(0,0,0,0.5);font-size:12px;	">'
			+'<div style="height: 90%;">'+options.max+'</div>'
			+'<div style="height: 10%;">'+options.min+'</div>'
			+'</td>'
			+'</tr>'
			+'</table>'
			+'</div>';
		$('#' + options.id).html(txt);
	};
	
	var createHorizontal = function(options){
		var txt = ''
			+'<div class="horizontal-pillar-box">'
			+'<table >'
			+'<tr style="height: 30%;">'
			+'<th class="left-label" id="title_'+options.id+'">'+options.title+'(%)</th>'
			+'<th class="right-label" id="label_'+options.id+'">0%</th>'
			+'</tr>'
			+'<tr style="height: 40%;">'
			+'<td colspan="2">'
			+'<div class="horizontal-pillar">'
			+'<div class="horizontal-pillar-percent" id="percent_'+options.id+'"></div>'
			+'</div>'
			+'</td>'
			+'</tr>'
			+'<tr style="height: 30%;">'
			+'<th class="left-label">'+options.min+'</th>'
			+'<th class="right-label">'+options.max+'</th>'
			+'</tr>'
			+'</table>'
			+'</div>';
		$('#' + options.id).html(txt);
	};
	
	var createEllipse = function(options){
		var txt = ''
			+'<div class="ellipse-pillar-box">'
			+'<div class="ellipse-label">'+options.title+'</div>'
			+'<div class="ellipse-pillar" id="percent_'+options.id+'">'
			+'<div class="ellipse-value" id="value_'+options.id+'">0</div>'
			+'</div>'
			+'</div>';
		$('#' + options.id).html(txt);
	};
	
	return pillar;
})(jQuery);